// // src/pages/Login/index.module.less
// .login {
//   width: 100vw;
//   height: 100vh;
//   background-color: #fff;
//   padding: 0 20px; // 改用px单位
//   box-sizing: border-box;
//   position: relative;
  
//   .title {
//     height: 40px;
//     font-size: 24px;
//     margin-top: 50px;
//     text-align: center;
//     line-height: 40px;
//     color: #333;
//     font-weight: bold;
//   }
  
//   &-wrapper {
//     width: 100%;
//     max-width: 400px;
//     margin: 0 auto;
//     margin-top: 40px;
//     border: 1px solid #ddd;
//     border-radius: 12px;
//     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
//     padding: 30px 20px;
//     background: #fff;
    
//     .avatar {
//       width: 100px;
//       height: 100px;
//       border-radius: 50%;
//       overflow: hidden;
//       margin: 0 auto 30px auto;
//       border: 3px solid #f5f5f5;
      
//       .avatar-img {
//         width: 100%;
//         height: 100%;
//         object-fit: cover;
//       }
//     }
//   }
  
//   // 修复表单样式
//   :global {
//     .rv-form-item {
//       margin-bottom: 25px;
      
//       &:last-child {
//         margin-bottom: 15px;
//       }
//     }
    
//     .rv-form-item__label {
//       font-size: 16px;
//       color: #333;
//       font-weight: 500;
//       min-width: 70px !important; // 确保最小宽度
//       text-align: right;
//       padding-right: 12px;
//     }
    
//     .rv-input {
//       font-size: 16px;
//       height: 44px;
//     }
    
//     .rv-input__control {
//       &::placeholder {
//         color: #999;
//         font-size: 14px;
//       }
//     }
//   }
  
//   &-tip {
//     position: absolute;
//     bottom: 30px;
//     left: 50%;
//     transform: translateX(-50%);
//     font-size: 14px;
//     color: #1976d2;
//     cursor: pointer;
//     text-align: center;
//     white-space: nowrap;
    
//     &:hover {
//       color: #1565c0;
//       text-decoration: underline;
//     }
//   }
// }

// // 媒体查询适配小屏幕
// @media (max-width: 375px) {
//   .login {
//     padding: 0 15px;
    
//     &-wrapper {
//       padding: 20px 15px;
      
//       .avatar {
//         width: 80px;
//         height: 80px;
//         margin-bottom: 20px;
//       }
//     }
    
//     :global {
//       .rv-form-item__label {
//         min-width: 60px !important;
//         font-size: 15px;
//       }
      
//       .rv-input {
//         font-size: 15px;
//         height: 40px;
//       }
//     }
//   }
// }


/* src/pages/Login/index.module.less */
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;   // 垂直布局
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;

  .title {
    height: 40px;
    font-size: 24px;
    margin-top: 50px;
    text-align: center;
    line-height: 40px;
    color: #333;
    font-weight: bold;
  }

  &-wrapper {
    flex: 1;   // 占据中间区域
    display: flex;
    flex-direction: column;
    justify-content: center; // 内容垂直居中
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
    background: #fff;

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 30px auto;
      border: 3px solid #f5f5f5;

      .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  &-tip {
    margin-bottom: 30px;  // 距离底部 30px
    text-align: center;
    font-size: 14px;
    color: #1976d2;
    cursor: pointer;

    &:hover {
      color: #1565c0;
      text-decoration: underline;
    }
  }
}

/* 小屏幕适配 */
@media (max-width: 375px) {
  .login {
    padding: 0 15px;

    &-wrapper {
      padding: 20px 15px;

      .avatar {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
      }
    }
  }
}
